Day 18 - 圖片濾鏡與混合模式

18th鐵人賽 day 18 css html 墨西哥塔可餅

饅頭

團隊第二屆技術創作市集

2026-09-06 10:39:32

91 瀏覽

分享至

除了昨天介紹的圖片設定外，CSS 還提供多種簡單且強大的視覺效果。這些效果不僅可應用於圖片，還能直接套用在所有 HTML 元素上，包括顏色濾鏡效果、混和模式、背景濾鏡和遮罩效果等。透過這些技術，整個網頁的視覺呈現將更加豐富多變。

Filter 濾鏡效果

filter 屬性能為網頁元素本身套用多種視覺效果，如果需要調整元素整體的色調或外觀時，這個屬性會非常實用。

.blur-effect {
  filter: blur(5px);        /* 模糊效果 */
  filter: brightness(150%); /* 提高亮度 */
  filter: contrast(200%);   /* 提高對比度 */
  filter: grayscale(100%);  /* 完全灰階 */
  filter: sepia(80%);       /* 懷舊色調 */
  filter: saturate(200%);   /* 增加飽和度 */
  filter: sepia(30%) contrast(120%) brightness(110%);  /* 組合多種濾鏡 */
}

濾鏡函數
- filter: blur(px); - 模糊效果，預設為 0px
- filter: brightness(%); - 亮度調整，預設為 100%，向上變亮，向下變暗
- filter: contrast(%); - 對比度調整，預設為 100%，值越高對比越強烈
- filter: grayscale(%); - 灰階效果，0% 為原色，100% 為完全灰階
- filter: sepia(%); - 懷舊色調，0% 為原色，100% 為完全懷舊效果
- filter: saturate(%); - 飽和度調整，100% 為原始飽和度，大於 100% 增加飽和度
- filter: hue-rotate(deg); - 色相旋轉，調整色相角度，0deg 至 360deg
- filter: invert(%); - 色彩反轉，0% 為原色，100% 為完全反轉
- filter: opacity(%); - 透明度調整，0% 完全透明，100% 完全不透明
- filter: drop-shadow(offset-x offset-y blur-radius color); - 陰影效果，可設定水平偏移、垂直偏移、模糊半徑和顏色
陰影效果

filter 也提供了陰影效果，但它與 box-shadow 的陰影效果有何不同呢？以下面的範例來說明，兩個容器中都放置了一張具有透明背景的 PNG 圖檔：
```
.drop-shadow {
  /* 陰影沿著 png 圖片的實際邊緣 */
  filter: drop-shadow(5px 5px 10px rgba(0, 0, 0, 0.5));
}
.box-shadow {
  /* 陰影沿著網頁元素的矩形邊緣 */
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}
```
drop-shadow 濾鏡的主要優勢在於它能為非矩形元素新增陰影效果，陰影會遵循元素的實際形狀，不限於方形輪廓。相較之下，box-shadow 僅能為元素的矩形邊界新增陰影。

Backdrop-filter 背景濾鏡

filter 屬性是針對元素本身套用效果，而 backdrop-filter 屬性則可以對元素背後的內容套用濾鏡效果，特別適合創造霧面玻璃效果。這種效果在現代網頁設計中非常流行，常用於導航列、模態框和卡片元素。以下是基本使用方式：

.glass-effect {
  background: rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(8px);
}

效果
- backdrop-filter: blur(px); - 背景模糊效果，實現霧面玻璃效果的關鍵
- backdrop-filter: brightness(%); - 調整背景亮度
- backdrop-filter: contrast(%); - 調整背景對比度
- backdrop-filter: grayscale(%); - 將背景轉為灰階
- backdrop-filter: saturate(%); - 調整背景飽和度
注意事項
- 使用時，元素必須有部分透明背景才能看到效果，通常會使用 RGBA 或 HSLA 色彩設定帶透明度的背景顏色，該元素背後的內容必須可見，才能看出明顯的效果。
- 此屬性在某些瀏覽器需要前綴，舊版瀏覽器可能不支援此效果。
- 效果若使用過度可能會影響顯示效能，請適量使用並在低效能裝置上進行測試。

Mix-blend-mode 混合模式

混合模式是繪圖軟體中常見的功能，它能將兩張照片以特殊方式疊加，使顏色產生獨特的交融效果。這種技術比單純調整透明度更加進階，能創造出更豐富、更特別的視覺表現。使用 mix-blend-mode 屬性就可以實現類似的效果。

效果
- mix-blend-mode: normal; - 正常模式，不產生混合效果（預設值）
- mix-blend-mode: multiply; - 色彩混合，類似疊加兩張投影片，產生更深的顏色
- mix-blend-mode: screen; - 濾色混合，類似疊加兩張投影片，產生更亮的效果
- mix-blend-mode: overlay; - 疊加混合，保留明亮與陰影部分，增強對比
- mix-blend-mode: difference; - 差值混合，在色彩重疊處產生極端對比效果

Mask 遮罩效果

網頁元素通常是方形或圓角形狀，若要創造更獨特的外觀，可以使用 mask 遮罩屬性。這個屬性能控制元素的可見部分，非常適合製作不規則形狀或複雜的視覺效果。mask 的設定方式類似 background 和 background-image，可以使用漸層或圖片作為遮罩素材。

/* 使用漸層作為遮罩 */
.gradient-mask {
  mask: linear-gradient(to bottom, transparent 30%, #000 100%);
}
/* 圓形遮罩 */
.circle-mask {
  mask: radial-gradient(circle at center, #000 40%, transparent 50%);
}
/* 圖片遮罩 */
.masked-image {
  mask: url('mask.png');
  mask-size: cover;
  mask-repeat: no-repeat;
  mask-position: center;
}

遮罩圖片的大小、重複模式和位置的控制方式與 background 屬性類似，只需使用對應的 mask-size、mask-repeat 和 mask-position 屬性即可進行設定。